<script setup lang="ts">
import { frameIn, menuClassification } from '../../../router/routes'
import { RouteRecordRaw, useRouter } from "vue-router"
import config from '../../../config'
// import { useUserStore } from '../../../store/userStore'
// import { storeToRefs } from 'pinia'
// import { RoleEnum } from '../../../enums/Role'

const props = defineProps<{
  collapse: boolean
}>()
// const userStore = useUserStore()
// const { user } = storeToRefs(userStore)
const router = useRouter()
let classificationList = [] as {id: number, title: string, icon: string}[]
let menuList: RouteRecordRaw[] = [] as RouteRecordRaw[]
const logoShow = ref(config.showLogo)
const initMenu = () => {
  menuList = frameIn[0].children as RouteRecordRaw[]
  classificationList = menuClassification
}

initMenu()

const toRoute = (path: string) => {
  router.push({
    path
  })
}
</script>

<template>
  <el-menu :collapse="props.collapse"  class="elMenu" background-color="#232442" text-color="#fff">
    <div class="logo" v-show="logoShow">
      <img style="width: 50px; height: 50px;object-fit: contain;" src="../../../assets/vite.svg" />
    </div>
    <el-sub-menu :index="String(index)" v-for="(classItem, index) in classificationList">
      <template #title>
        <el-icon>
          <component class="menuIcon" :is="classItem.icon" />
        </el-icon>
        <span class="itemSubTitle">{{classItem.title}}</span>
      </template>
        <el-menu-item class="elMenuItem"
          v-for="item in menuList.filter(item => item.meta?.clsId && item.meta?.clsId === classItem.id)"
          :key="item.name"
          @click="toRoute(item.path)"
          :index="String(item.name)"
          >
          <span class="itemTitle">{{item.meta?.title}}</span>
        </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<style lang="less" scoped>
.elMenu:not(.el-menu--collapse) {
  width: 200px;
}
.elMenu {
  height: 100%;
  overflow: auto;
  .logo {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: @GlobalSecondaryColor;
  }
  .itemSubTitle {
    color: #fff;
  }
  .itemTitle {
    margin: auto;
    color: #fff;
  }
}
</style>
